import React, { useState } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Modal, Checkbox, Form, Input } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { handleCancel, handleOk, loginOption } from "@/store/modules/user";
import { RegisterOrLoginApi } from "@/http/api/user";
import loginLess from "./index.module.less";
import { message } from "antd";

function Login() {
  const LoginOpen = useSelector((state: any) => state.user.LoginOpen);
  const dispatch = useDispatch();

  const [messageApi, contextHolder] = message.useMessage();
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  type FieldType = {
    PhoneNumber?: string;
    PassWord?: string;
  };
  const Loginbtn = async () => {
    const params = {
      PhoneNumber: form.getFieldsValue().PhoneNumber,
      PassWord: form.getFieldsValue().PassWord,
    };
    const res: any = await RegisterOrLoginApi(params);
    console.log("登录注册结果", res);
    if (res.status === 0) {
      messageApi.open({
        type: "success",
        content: "登录成功",
      });
      const option = {
        accessToken: res.accessToken,
        refreshToken: res.refreshToken,
        HeaderImg: res.HeaderImg,
        username: res.username,
        UserId: res.username,
      };
      dispatch(loginOption(option));
      localStorage.setItem("accessToken", res.accessToken);
      localStorage.setItem("refreshToken", res.refreshToken);
      localStorage.setItem("HeaderImg", res.HeaderImg);
      localStorage.setItem("username", res.username);
      localStorage.setItem("UserId", res.UserId);
      dispatch(handleCancel());
    }
  };
  return (
    <>
      {contextHolder}
      <Modal
        title={null}
        open={LoginOpen}
        onOk={() => dispatch(handleOk())}
        onCancel={() => dispatch(handleCancel())}
        centered
        footer={null}
        width={700}
      >
        <div className={loginLess.login_content}>
          <div className="title">登录掘金畅享更多权益</div>
          <div className="form">
            <div className="left_form">
              <Form
                name="basic"
                labelCol={{ span: 8 }}
                layout={"vertical"}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                form={form}
              >
                <Form.Item<FieldType>
                  name="PhoneNumber"
                  rules={[{ required: true, message: "请输入手机号" }]}
                >
                  <Input
                    prefix={<UserOutlined className="site-form-item-icon" />}
                    placeholder="请输入手机号"
                  />
                </Form.Item>

                <Form.Item<FieldType>
                  name="PassWord"
                  rules={[{ required: true, message: "请输入密码" }]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    placeholder="密码"
                    type="password"
                  />
                </Form.Item>
              </Form>
              <div className="login_btn" onClick={Loginbtn}>
                登录 / 注册
              </div>
              <div className="other_login">
                <div>其他登录:</div>
                <div className="icon">
                  <div className="qq_img">
                    <img src="../../../public/fontimg/qq.png" alt="qq" />
                  </div>
                  <div className="wei_img">
                    <img src="../../../public/fontimg/chat.png" alt="weichat" />
                  </div>
                  <div className="dou_img">
                    <img
                      src="../../../public/fontimg/tiktalk.png"
                      alt="douying"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div className="right_content">
              <div className="right_title">
                扫码登录<span>(6.4.1及以上版本支持)</span>
              </div>
              <div className="qr_img">
                <img src="../../../public/img/qr.png" alt="qr" />
                <div className="logo">
                  <img src="../../../public/img/juejin.7c9cb48.png" alt="" />
                </div>
              </div>
              <div className="footer_title">
                <div>
                  打开<span>稀土掘金APP</span>
                </div>
                <div>点击我的-左上角-扫一扫</div>
              </div>
            </div>
          </div>
          <div className="tips"></div>
        </div>
      </Modal>
    </>
  );
}

export default Login;
